@import "../../both/mixin";

$translate_length: (60px + 2px) * 3 / 2;

.user_video_sidebar.bln{
  box-sizing: border-box;
  width : 50px;

  position: absolute;
  top : 50%;
  right : 0;
  -webkit-transform: translate(0, -$translate_length);
  -moz-transform: translate(0, -$translate_length);
  -ms-transform: translate(0, -$translate_length);
  -o-transform: translate(0, -$translate_length);
  transform: translate(0, -$translate_length);

  ul{
    text-align: center;
    display: block;
    li{
      display: block;
      margin-bottom: 2px;
      color: #B5B9BC;
      background-color: #363C40;
      height : 60px;
      font-size : 14px;
      cursor: pointer;
      padding-top : (60px - 29px) / 2;

      i{
        display: block;
      }
    }
  }

  a{
    text-decoration: none;
  }
}

.video_sidebar_popup_cr{
  border-radius: 4px;
  background : #fff;
  box-shadow: 8px 0 16px 0 rgba(7,17,27,0.2);

  .modal-title{
    padding : 24px 32px 0;

    div{
      font-size : 16px;
      font-weight: bold;
      color : #07111b;
    }

    a.mooc-icon-close{
      font-size : 18px;
      color : #93999f;
      display: block;
      position: absolute;
      right : 32px;
      top : 24px;
      text-decoration: none;
    }
  }

  .modal-dialog{
    padding : 24px 32px 32px;

    div.note-pop{
      width : 655px;
    }

    div.text_area_wrap{
      position: relative;
      border : 1px solid #d3dce0;
      padding : 8px 10px;

      textarea,textarea:focus{
        color : #14191e;
        font-size : 14px;
        height : 72px;
        resize : none;
        overflow: auto;
        width : 100%;
        line-height : 18px;
        outline: 0;
        border : 0;
      }
    }

    .btn_wrap{
      text-align: right;
      margin-top : 20px;
    }

    div.publish_notes_btn{
      width : 120px;
      color : #fff;
      background-color : #00b33b;
      border :1px solid #00b33b;
      cursor: pointer;
      transition: all .3s;
      display: inline-block;
      font-weight: 200;
      text-align: center;
      vertical-align: middle;
      outline:none;
      padding : 6px 12px;
      font-size : 14px;
      line-height : 20px;
      border-radius: 2px;

      &:hover{
        background-color : #00d747;
        border-color : #00d747;
      }
    }
  }
}